<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main"/>
    <g:set var="entityName" value="${message(code: 'estate.label', default: 'estate')}"/>
    <title>市场指数</title>
    <style>
    .contact-stat span{
        color: #333;
    }
    </style>
</head>

<body class="fixed-navbar fixed-sidebar">
<div class="small-header">
    <div class="hpanel">
        <div class="panel-body">
            <div id="hbreadcrumb" class="pull-right">
                <ol class="hbreadcrumb breadcrumb">
                    <li>CINDATA PLS</li>
                    <li class="active">
                        <span>市场指数</span>
                    </li>
                </ol>
            </div>

            <h2 class="font-light m-b-xs">
                %{--<a href="index" class="pe-7s-back fa-2x">&nbsp;&nbsp;</a>--}%
                市场指数
            </h2>
        </div>
    </div>
</div>

<div class="content animate-panel">

    <div class="row">
        <g:form method="POST" action="housingIndex" class="form-horizontal" role="form">
            <div class="hpanel hblue">
                <div class="panel-heading">
                    查询
                    <div class="panel-tools">
                        <button class="btn btn-primary btn-xs" id="searchData" type="submit"><i class="fa fa-search"></i> 查询</button>
                        <button class="btn btn-warning2 btn-xs" type="button" id="resetBtn"><i class="fa fa-times"></i> 重置</button>
                    </div>
                </div>

                <div class="panel-body seach-group" id="bug1">
                    <div class="row">
                        <div class="form-group col-sm-3">
                            <label for="city" class="col-sm-4 control-label">城市</label>
                            <div class="col-sm-8">
                                <g:select class="form-control" name="city" id="city" from="${cityArr}" valueMessagePrefix="status"  optionKey="value" optionValue="name"  value="${params['city']}" noSelection="${['0000': '全国']}"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </g:form>
    </div>

    <div class="row">
        <div class="hpanel hgreen">
            <div class="panel-heading">
                <div class="panel-tools">
                    <a class="showhide"><i class="fa fa-chevron-up"></i></a>
                </div>
                指数变化
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-12">
                        出售挂牌价周指数：北京市${df.format(bjnum)}(<g:if test="${bjrate <= 0}">
                        <span class="text-success">↓ ${df.format(Math.abs(bjrate))}%</span>)
                    </g:if><g:else>
                        <span class="text-danger">↑ ${df.format(bjrate)}%</span>)
                    </g:else>

                        上海市${df.format(shnum)}(<g:if test="${shrate <= 0}">
                        <span class="text-success">↓ ${df.format(Math.abs(shrate))}%</span>)
                    </g:if><g:else>
                        <span class="text-danger">↑ ${df.format(shrate)}%</span>)
                    </g:else>

                        广州市${df.format(gznum)}(<g:if test="${gzrate <= 0}">
                        <span class="text-success">↓ ${df.format(Math.abs(gzrate))}%</span>)
                    </g:if><g:else>
                        <span class="text-danger">↑ ${df.format(gzrate)}%</span>)
                    </g:else>
                        深圳市${df.format(sznum)}(<g:if test="${szrate <= 0}">
                        <span class="text-success">↓ ${df.format(Math.abs(szrate))}%</span>)
                    </g:if><g:else>
                        <span class="text-danger">↑ ${df.format(szrate)}%</span>)
                    </g:else>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-2">
                        <div class="contact-stat">
                            <span><b class="text-danger">【售】</b><b>全国出售周指数变化</b> </span>
                            <span>(${weekStr.split(",")[0]}至${weekStr.split(",")[1]})</span>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="contact-stat">
                            挂牌价环比
                            <g:if test="${esfPriceRate <=0}">
                                <b class="text-success"> ↓ ${df.format(Math.abs(esfPriceRate))}%</b>
                            </g:if>
                            <g:else>
                                <b class="text-danger"> ↑ ${df.format(Math.abs(esfPriceRate))}%</b>
                            </g:else>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="contact-stat">
                            挂牌量环比
                            <g:if test="${esfNumRate <=0}">
                                <b class="text-success"> ↓ ${df.format(Math.abs(esfNumRate))}%</b>
                            </g:if>
                            <g:else>
                                <b class="text-danger"> ↑ ${df.format(Math.abs(esfNumRate))}%</b>
                            </g:else>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="contact-stat">
                            <b class="text-danger">【租】</b><b>全国出租月指数变化</b>
                            <span>(${monthStr})</span>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="contact-stat">
                            <span>挂牌价环比
                                <g:if test="${czfPriceRate <=0}">
                                    <b class="text-success"> ↓ ${df.format(Math.abs(czfPriceRate))}%</b>
                                </g:if>
                                <g:else>
                                    <b class="text-danger"> ↑ ${df.format(Math.abs(czfPriceRate))}%</b>
                                </g:else>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="contact-stat">
                            挂牌量环比
                            <g:if test="${czfNumRate <=0}">
                                <b class="text-success"> ↓ ${df.format(Math.abs(czfNumRate))}%</b>
                            </g:if>
                            <g:else>
                                <b class="text-danger"> ↑ ${df.format(Math.abs(czfNumRate))}%</b>
                            </g:else>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="hpanel hgreen">
            <div class="panel-heading">
                <div class="panel-tools">
                    <a class="showhide"><i class="fa fa-chevron-up"></i></a>
                </div>
                指数报告
            </div>
            <div class="row">
                <div class="hpanel" style="">
                    <div class="col-md-12">
                        <div class="hpanel">
                            <div class="panel-body no-padding">
                                <div class="table-responsive">
                                    <table cellpadding="1" cellspacing="1" class="table table-striped table-bordered table-hover text-center">
                                        <thead>
                                        <tr>
                                            <g:sortableColumn property="city" title="更新周期" class="col-md-1 text-center" params="${params}"/>
                                            <g:sortableColumn property="district" title="报告名称" class="col-md-1 text-center" params="${params}"/>
                                            <g:sortableColumn property="fullName" title="操作" class=" col-md-1 text-center" params="${params}"/>
                                            <g:sortableColumn property="counts" title="更新日期" class=" col-md-1 text-center" params="${params}"/>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td class="text-center">月</td>
                                            <td class="text-center">2018年9月03日指数报告</td>
                                            <td class="text-center"><a href="#">下载</a></td>
                                            <td class="text-center">2018/9/13</td>
                                        </tr>
                                        <tr>
                                            <td class="text-center">月</td>
                                            <td class="text-center">2018年7月12日指数报告</td>
                                            <td class="text-center"><a href="#">下载</a></td>
                                            <td class="text-center">2018/9/13</td>
                                        </tr>
                                        <tr>
                                            <td class="text-center">周</td>
                                            <td class="text-center">2018年9月03日指数报告</td>
                                            <td class="text-center"><a href="#">下载</a></td>
                                            <td class="text-center">2018/9/13</td>
                                        </tr>
                                        <tr>
                                            <td class="text-center">周</td>
                                            <td class="text-center">2018年10月03日指数报告</td>
                                            <td class="text-center"><a href="#">下载</a></td>
                                            <td class="text-center">2018/9/13</td>
                                        </tr>
                                        <tr>
                                            <td class="text-center">月</td>
                                            <td class="text-center">2018年7月02日指数报告</td>
                                            <td class="text-center"><a href="#">下载</a></td>
                                            <td class="text-center">2018/9/13</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="hpanel hgreen">
            <div class="panel-heading">
                <div class="panel-tools">
                    <a class="showhide"><i class="fa fa-chevron-up"></i></a>
                </div>
                房产资讯
            </div>
            <div class="row">
                <div class="hpanel" style="">
                    <div class="col-md-12">
                        <div class="hpanel">
                            <div class="panel-body no-padding">
                                <div class="table-responsive">
                                    <table cellpadding="1" cellspacing="1" class="table table-striped table-bordered table-hover text-center">
                                        <thead>
                                        <tr>
                                            <g:sortableColumn property="city" title="资讯标题" class="col-md-1 text-center" params="${params}"/>
                                            <g:sortableColumn property="counts" title="更新日期" class=" col-md-1 text-center" params="${params}"/>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td class="text-center">你的房租涨了多少？全方位解读北京租金数据</td>
                                            <td class="text-center">2018/9/14</td>
                                        </tr>
                                        <tr>
                                            <td class="text-center">8月全国房价排名，这个城市涨幅连续两月领</td>
                                            <td class="text-center">2018/9/14</td>
                                        </tr>
                                        <tr>
                                            <td class="text-center">最新！全国各城市租金分布地图出炉</td>
                                            <td class="text-center">2018/9/14</td>
                                        </tr>
                                        <tr>
                                            <td class="text-center">全国房价过万元的城市已经达到73个</td>
                                            <td class="text-center">2018/9/14</td>
                                        </tr>
                                        <tr>
                                            <td class="text-center">厦门房价“暴跌”还是“微调”？</td>
                                            <td class="text-center">2018/9/14</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="hpanel hgreen">
            <div class="row">
                <div class="col-md-8">
                    <div class="hpanel">
                        <div class="panel-heading">
                            <div class="panel-tools">
                                <a class="showhide"><i class="fa fa-chevron-up"></i></a>
                            </div>
                            指数地图
                        </div>

                        <div class="panel-body seach-group" id="">
                            <div class="row">
                                <div class="content animate-panel p-b-n">
                                    <div class="row">
                                        %{--<label class="control-label">重点城市涨跌排行</label>--}%
                                        <div class="col-md-12">
                                            <div id="china-map" style="width: 100%;height: 500px;margin: 0 auto;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="hpanel">
                        <div class="panel-heading">
                            <div class="panel-tools">
                                <a class="showhide"><i class="fa fa-chevron-up"></i></a>
                            </div>
                            重点城市涨跌排行
                        </div>

                        <div class="panel-body no-padding" style="height: 576px;">
                            <div class="row">
                                <div class="content animate-panel p-b-n">
                                    <div class="table-responsive">
                                        <table class="table text-left" id="table1">
                                            <thead>
                                            <tr class="text-center">
                                                <td>排行</td>
                                                <td>城市</td>
                                                <td>均价（元/㎡）</td>
                                                <td>周环比</td>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <g:each   in = "${cityArr40}"   >
                                            <tr>
                                                <td class="text-center">${i++}</td>
                                                <td class="text-center"><g:link controller="analyze" params="${['city':it?.cityCode]}" target="_blank" action="housingIndex">${it?.cityName}</g:link></td>
                                                <td class="text-center">${it?.priceAvg}</td>
                                                <td class="text-center"><g:if test="${it?.priceMomRatio >=0}"><span class="text-danger">↑ </g:if><g:else><span class="text-success">↓ </g:else>${df.format(Math.abs(it?.priceMomRatio*100))}%</td>
                                            </tr>
                                            </g:each>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="hpanel hgreen">
            <div class="panel-heading">
                <div class="panel-tools">
                    <a class="showhide"><i class="fa fa-chevron-up"></i></a>
                </div>
                全国城市二手房指数
            </div>

            <div class="panel-body">
                <ul id="myTab" class="nav nav-tabs">
                    <li id="one" >
                        <a href="" data-toggle="tab" href="#tab-1" aria-expanded="true" onclick="selectTabChange('esf','all')">
                            全国出售
                        </a>
                    </li>
                    <li id="two">
                        <a href="" data-toggle="tab" href="#tab-2" aria-expanded="true" onclick="selectTabChange('esf','square')">
                            不同套型面积出售
                        </a>
                    </li>
                    <li id="three" class="active">
                        <a href="" data-toggle="tab" href="#tab-3" aria-expanded="true" onclick="selectTabChange('esf','citylevel')">
                            各线城市出售
                        </a>
                    </li>
                    <li id="four">
                        <a href="" data-toggle="tab" href="#tab-4" aria-expanded="true" onclick="selectTabChange('esf','area')">
                            各地区出售
                        </a>
                    </li>
                    <li id="five">
                        <a href="" data-toggle="tab" href="#tab-5" aria-expanded="true" onclick="selectTabChange('czf','all')">
                            全国出租
                        </a>
                    </li>
                    <li id="six">
                        <a href="" data-toggle="tab" href="#tab-6" aria-expanded="true" onclick="selectTabChange('czf','square')">
                            不同套型面积出租
                        </a>
                    </li>
                    <li id="seven">
                        <a href="" data-toggle="tab" href="#tab-7" aria-expanded="true" onclick="selectTabChange('czf','citylevel')">
                            各线城市出租
                        </a>
                    </li>
                    <li id="eight">
                        <a href="" data-toggle="tab" href="#tab-8" aria-expanded="true" onclick="selectTabChange('czf','area')">
                            各地区出租
                        </a>
                    </li>
                </ul>
                <button style="position: absolute;z-index: 99;right: 20px;top: 15px;" class="btn btn-default" type="button" data-toggle="modal" data-target="#myModal7">说明</button>
                <div class="row">
                    <div id="prodNumber1" style="width: 100%;height: 340px;"></div>
                </div>
            </div>
        </div>
    </div>



</div>

%{--模态框--}%
<div class="modal fade hmodal-success" id="myModal7" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="color-line"></div>
            <div class="modal-body">
                <h5>各线城市</h5>
                <p>一线城市：包括：北京、上海、广州、深圳等4个城市。</p>
                <p>二线城市：包括：天津、石家庄、沈阳、大连、长春、哈尔滨、南京、苏州、杭州、宁波、合肥、福州、厦门、南昌、济南、青岛、郑州、武汉、长沙、南宁、海口、重庆、成都、昆明、西安等25个城市。</p>
                <p>三线城市：包括：唐山、秦皇岛、邯郸、保定、沧州、廊坊、太原、呼和浩特、包头、鞍山、丹东、吉林、齐齐哈尔、大庆、无锡、徐州、常州、南通、连云港、淮安、盐城、扬州、镇江、泰州、温州、嘉兴、湖州、绍兴、金华、衢州、舟山、台州、丽水、芜湖、蚌埠、安庆、莆田、泉州、漳州、南平、龙岩、宁德、赣州、淄博、东营、烟台、潍坊、济宁、泰安、德州、威海、聊城、临沂、日照、菏泽、滨州、洛阳、宜昌、襄阳、常德、韶关、珠海、汕头、佛山、江门、湛江、惠州、潮州、中山、东莞、清远、柳州、桂林、北海、三亚、泸州、绵阳、南充、贵阳、兰州、西宁、银川、乌鲁木齐等83个城市。</p>
                <p>四线城市：包括：邢台、张家口、承德、衡水、大同、阳泉、长治、晋城、朔州、晋中、忻州、临汾、运城、吕梁、乌海、赤峰、通辽、呼伦贝尔、鄂尔多斯、乌兰察布、巴彦淖尔、抚顺、本溪、锦州、营口、阜新、辽阳、盘锦、铁岭、朝阳、葫芦岛、四平、辽源、通化、白山、白城、松原、鸡西、鹤岗、双鸭山、伊春、佳木斯、七台河、牡丹江、黑河、绥化、宿迁、淮南、马鞍山、淮北、铜陵、黄山、阜阳、亳州、宿州、滁州、六安、巢湖、池州、宣城、三明、景德镇、萍乡、九江、新余、鹰潭、上饶、抚州、吉安、宜春、枣庄、莱芜、开封、平顶山、安阳、鹤壁、新乡、焦作、濮阳、许昌、漯河、三门峡、商丘、南阳、信阳、周口、驻马店、黄石、十堰、荆州、鄂州、荆门、孝感、黄冈、咸宁、随州、株洲、湘潭、衡阳、邵阳、岳阳、益阳、郴州、永州、怀化、张家界、娄底、茂名、肇庆、梅州、汕尾、河源、阳江、揭阳、云浮、梧州、防城港、钦州、玉林、贵港、百色、来宾、崇左、贺州、河池、自贡、攀枝花、德阳、广元、遂宁、内江、资阳、乐山、宜宾、达州、广安、雅安、眉山、巴中、六盘水、遵义、安顺、毕节、铜仁、玉溪、曲靖、昭通、丽江、保山、普洱、临沧、拉萨、铜川、宝鸡、咸阳、延安、汉中、渭南、榆林、商洛、安康、嘉峪关、金昌、白银、天水、武威、张掖、平凉、酒泉、庆阳、定西、陇南、石嘴山、吴忠、固原、中卫、克拉玛依、阿拉善盟、锡林郭勒盟、兴安盟、延边朝鲜族自治州、大兴安岭地区、恩施土家族苗族自治州、湘西土家族苗族自治州、凉山彝族自治州、阿坝藏族羌族自治州、甘孜藏族自治州、黔西南布依族苗族自治州、黔南布依族苗族自治州、黔东南苗族侗族自治州、迪庆藏族自治州、楚雄彝族自治州、红河哈尼族彝族自治州、西双版纳傣族自治州、大理白族自治州、德宏傣族景颇族自治州、怒江傈僳族自治州、文山壮族苗族自治州、林芝地区、阿里地区、山南地区、日喀则地区、那曲地区、昌都地区、甘南藏族自治州、临夏回族自治州、海东地区、海北藏族自治州、黄南藏族自治州、海南藏族自治州、海西蒙古族藏族自治州、果洛藏族自治州、玉树藏族自治州、吐鲁番地区、哈密地区、阿克苏地区、塔城地区、阿勒泰地区、喀什地区、和田地区、巴音郭楞蒙古自治州、昌吉回族自治州、博尔塔拉蒙古自治州、伊犁哈萨克自治州、克孜勒苏柯尔克孜自治州等地级行政单位和五指山、琼海、儋州、文昌、万宁、东方、屯昌县、定安县、澄迈县、临高县、昌江黎族自治县、乐东黎族自治县、白沙黎族自治县、陵水黎族自治县、琼中黎族苗族自治县、保亭黎族苗族自治县、仙桃市、潜江市、天门市、神农架林区、平潭综合实验区、贵安新区、滇中产业新区、杨凌示范区、韩城市、农垦总局、森工总局、抚远县、绥芬河市、济源市、巩义市、兰考县、汝州市、滑县、长垣县、邓州市、永城市、固始县、鹿邑县、新蔡县等地级以下级别行政单位，共264个城市。</p>
                <h5>各地区</h5>
                <p>东部地区：包括：北京、天津、河北、辽宁、上海、江苏、浙江、福建、山东、广东、海南所包含城市。</p>
                <p>中部地区：包括：山西、吉林、黑龙江、安徽、江西、河南、湖北、湖南所包含城市。</p>
                <p>西部地区：包括：内蒙古、广西、重庆、四川、贵州、云南、西藏、陕西、甘肃、青海、宁夏、新疆所包含城市。</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<asset:javascript src="echarts/echarts-all-3.js" />
<asset:javascript src="echarts/china.js"/>
<script>
    var data = new Array()
    var  arr = "${city40Arr}".split(",")
    for(var i = 0 ;i <= arr.length ;i++){
        var ar = arr[i]
        if(ar){
            // alert(ar)
            ar = ar.split("?")
            data.push({name:ar[0],value:ar[1]})
        }

    }
    console.log (data)
    var geoCoordMap = {
        '海门市':[121.15,31.89],
        '鄂尔多斯市':[109.781327,39.608266],
        '招远市':[120.38,37.35],
        '舟山市':[122.207216,29.985295],
        '齐齐哈尔市':[123.97,47.33],
        '盐城市':[120.13,33.38],
        '赤峰市':[118.87,42.28],
        '青岛市':[120.33,36.07],
        '乳山市':[121.52,36.89],
        '金昌市':[102.188043,38.520089],
        '泉州市':[118.58,24.93],
        '莱西市':[120.53,36.86],
        '日照市':[119.46,35.42],
        '胶南市':[119.97,35.88],
        '南通市':[121.05,32.08],
        '拉萨市':[91.11,29.97],
        '云浮市':[112.02,22.93],
        '梅州市':[116.1,24.55],
        '文登市':[122.05,37.2],
        '上海市':[121.48,31.22],
        '攀枝花市':[101.718637,26.582347],
        '威海市':[122.1,37.5],
        '承德市':[117.93,40.97],
        '厦门市':[118.1,24.46],
        '汕尾市':[115.375279,22.786211],
        '潮州市':[116.63,23.68],
        '丹东市':[124.37,40.13],
        '太仓市':[121.1,31.45],
        '曲靖市':[103.79,25.51],
        '烟台市':[121.39,37.52],
        '福州市':[119.3,26.08],
        '瓦房店市':[121.979603,39.627114],
        '即墨市':[120.45,36.38],
        '抚顺市':[123.97,41.97],
        '玉溪市':[102.52,24.35],
        '张家口市':[114.87,40.82],
        '阳泉市':[113.57,37.85],
        '莱州市':[119.942327,37.177017],
        '湖州市':[120.1,30.86],
        '汕头市':[116.69,23.39],
        '昆山市':[120.95,31.39],
        '宁波市':[121.56,29.86],
        '湛江市':[110.359377,21.270708],
        '揭阳市':[116.35,23.55],
        '荣成市':[122.41,37.16],
        '连云港市':[119.16,34.59],
        '葫芦岛市':[120.836932,40.711052],
        '常熟市':[120.74,31.64],
        '东莞市':[113.75,23.04],
        '河源市':[114.68,23.73],
        '淮安市':[119.15,33.5],
        '泰州市':[119.9,32.49],
        '南宁市':[108.33,22.84],
        '营口市':[122.18,40.65],
        '惠州市':[114.4,23.09],
        '江阴市':[120.26,31.91],
        '蓬莱市':[120.75,37.8],
        '韶关市':[113.62,24.84],
        '嘉峪关市':[98.289152,39.77313],
        '广州市':[113.23,23.16],
        '延安市':[109.47,36.6],
        '太原市':[112.53,37.87],
        '清远市':[113.01,23.7],
        '中山市':[113.38,22.52],
        '昆明市':[102.73,25.04],
        '寿光市':[118.73,36.86],
        '盘锦市':[122.070714,41.119997],
        '长治市':[113.08,36.18],
        '深圳市':[114.07,22.62],
        '珠海市':[113.52,22.3],
        '宿迁市':[118.3,33.96],
        '咸阳市':[108.72,34.36],
        '铜川市':[109.11,35.09],
        '平度市':[119.97,36.77],
        '佛山市':[113.11,23.05],
        '海口市':[110.35,20.02],
        '江门市':[113.06,22.61],
        '章丘市':[117.53,36.72],
        '肇庆市':[112.44,23.05],
        '大连市':[121.62,38.92],
        '临汾市':[111.5,36.08],
        '吴江市':[120.63,31.16],
        '石嘴山市':[106.39,39.04],
        '沈阳市':[123.38,41.8],
        '苏州市':[120.62,31.32],
        '茂名市':[110.88,21.68],
        '嘉兴市':[120.76,30.77],
        '长春市':[125.35,43.88],
        '胶州市':[120.03336,36.264622],
        '银川市':[106.27,38.47],
        '张家港市':[120.555821,31.875428],
        '三门峡市':[111.19,34.76],
        '锦州市':[121.15,41.13],
        '南昌市':[115.89,28.68],
        '柳州市':[109.4,24.33],
        '三亚市':[109.511909,18.252847],
        '自贡市':[104.778442,29.33903],
        '吉林市':[126.57,43.87],
        '阳江市':[111.95,21.85],
        '泸州市':[105.39,28.91],
        '西宁市':[101.74,36.56],
        '宜宾市':[104.56,29.77],
        '呼和浩特市':[111.65,40.82],
        '成都市':[104.06,30.67],
        '大同市':[113.3,40.12],
        '镇江市':[119.44,32.2],
        '桂林市':[110.28,25.29],
        '张家界市':[110.479191,29.117096],
        '宜兴市':[119.82,31.36],
        '北海市':[109.12,21.49],
        '西安市':[108.95,34.27],
        '金坛市':[119.56,31.74],
        '东营市':[118.49,37.46],
        '牡丹江市':[129.58,44.6],
        '遵义市':[106.9,27.7],
        '绍兴市':[120.58,30.01],
        '扬州市':[119.42,32.39],
        '常州市':[119.95,31.79],
        '潍坊市':[119.1,36.62],
        '重庆市':[106.54,29.59],
        '台州市':[121.420757,28.656386],
        '南京市':[118.78,32.04],
        '滨州市':[118.03,37.36],
        '贵阳市':[106.71,26.57],
        '无锡市':[120.29,31.59],
        '本溪市':[123.73,41.3],
        '克拉玛依市':[84.77,45.59],
        '渭南市':[109.5,34.52],
        '马鞍山市':[118.48,31.56],
        '宝鸡市':[107.15,34.38],
        '焦作市':[113.21,35.24],
        '句容市':[119.16,31.95],
        '北京市':[116.46,39.92],
        '徐州市':[117.2,34.26],
        '衡水市':[115.72,37.72],
        '包头市':[110,40.58],
        '绵阳市':[104.73,31.48],
        '乌鲁木齐市':[87.68,43.77],
        '枣庄市':[117.57,34.86],
        '杭州市':[120.19,30.26],
        '淄博市':[118.05,36.78],
        '鞍山市':[122.85,41.12],
        '溧阳市':[119.48,31.43],
        '库尔勒市':[86.06,41.68],
        '安阳市':[114.35,36.1],
        '开封市':[114.35,34.79],
        '济南市':[117,36.65],
        '德阳市':[104.37,31.13],
        '温州市':[120.65,28.01],
        '九江市':[115.97,29.71],
        '邯郸市':[114.47,36.6],
        '临安市':[119.72,30.23],
        '兰州市':[103.73,36.03],
        '沧州市':[116.83,38.33],
        '临沂市':[118.35,35.05],
        '南充市':[106.110698,30.837793],
        '天津市':[117.2,39.13],
        '富阳市':[119.95,30.07],
        '泰安市':[117.13,36.18],
        '诸暨市':[120.23,29.71],
        '郑州市':[113.65,34.76],
        '哈尔滨市':[126.63,45.75],
        '聊城市':[115.97,36.45],
        '芜湖市':[118.38,31.33],
        '唐山市':[118.02,39.63],
        '平顶山市':[113.29,33.75],
        '邢台市':[114.48,37.05],
        '德州市':[116.29,37.45],
        '济宁市':[116.59,35.38],
        '荆州市':[112.239741,30.335165],
        '宜昌市':[111.3,30.7],
        '义乌市':[120.06,29.32],
        '丽水市':[119.92,28.45],
        '洛阳市':[112.44,34.7],
        '秦皇岛市':[119.57,39.95],
        '株洲市':[113.16,27.83],
        '石家庄市':[114.48,38.03],
        '莱芜市':[117.67,36.19],
        '常德市':[111.69,29.05],
        '保定市':[115.48,38.85],
        '湘潭市':[112.91,27.87],
        '金华市':[119.64,29.12],
        '岳阳市':[113.09,29.37],
        '长沙市':[113,28.21],
        '衢州市':[118.88,28.97],
        '廊坊市':[116.7,39.53],
        '菏泽市':[115.480656,35.23375],
        '合肥市':[117.27,31.86],
        '武汉市':[114.31,30.52],
        '大庆市':[125.03,46.58]
    };

    function convertData(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value)
                });
            }
        }
        return res;
    };
    function randomValue() {
        return Math.round(Math.random()*1000);
    }

    var myChart = echarts.init(document.getElementById('china-map'));
    var option = {
        tooltip: {
            formatter: function (params) {
                return '一周环比变化(%)'+ '<br>' + params.name + ':' + params.value[2];
            }
        },
        visualMap: {
            min: -1,
            max: 1,
            left: 'left',
            top: 'bottom',
//            text: ['High','Low'],
            seriesIndex: [0],
            inRange: {
                color: ['red', 'blue']
            },
            calculable : false
        },
        geo: {
            map: 'china',
            roam: true,
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        color: 'rgba(0,0,0,0.4)'
                    }
                }
            },
            //http://echarts.baidu.com/blog/2016/04/28/echarts-map-tutorial.html
            itemStyle: {
                normal:{
                    borderColor: 'rgba(0, 0, 0, 0.2)'
                },
                emphasis:{
//                    areaColor: null,
//                    shadowOffsetX: 0,
//                    shadowOffsetY: 0,
//                    shadowBlur: 20,
//                    borderWidth: 0,
//                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                    color: '#ccc'
                }
            }
        },
        series : [
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                data: convertData(data),
                symbolSize: 6,
                symbolRotate: 15,
                label: {
                    normal: {
                        formatter: '',
                        position: 'right',
                        show: false
                    },
                    emphasis: {
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
//                      根据值给颜色
                        color: 'red'
                    }
                }
            },
            {
                type: 'map',
                geoIndex: 0,
                tooltip: {show: false},
                data:[

                ]
            }
        ]
    };

    myChart.setOption(option);
</script>

<script>
    //strType: esf 二手房  czf 出租房
    var cityCode
    var strType =  'esf';
    var dataType =  'citylevel';
    function selectTabChange(strType,dataType) {
        cityCode =  $('#city').val()
        var dataarr = []
        $.ajax({
            type: 'POST',
            url: "ajaxData",
            data: {"cityCode":cityCode,"strType":strType,"dataType":dataType},
            success: function(msg){
                var formatter = "{b0}<br>"
                var iii = 0;
                for(var x = 0; x<= msg.mapCityName.length;x++){
                    var temp = msg.mapCityName[x]
                    if(msg.mapCityName[x]){
                        var name  =  temp.split("|")[0]
                        dataarr.push({
                            type: 'line',
                            data: temp.split("|")[1].split(","),
                            yAxis: 1,
                            large: true
                        })
                        formatter =  formatter + name+": {c"+iii+"}<br/>"
                        iii++;
                    }
                }
                for(var l =0;l<=20;l++){
                    dataarr.push({type:'line',data:[],large:true})
                }
                var myChart1 = echarts.init(document.getElementById('prodNumber1'));
                var categoryData = msg.xArrs

                //title
                var title  = '全国城市二手房出售挂牌量指数和挂牌价指数'
                if(strType == 'esf'){
                    if(dataType == 'all'){
                        title = '全国城市二手房出售挂牌量指数和挂牌价指数 '
                    }
                    if(dataType == 'square'){
                        title = '中国城市二手房不同套型面积出售挂牌价指数走势图  '
                    }
                    if(dataType == 'citylevel'){
                        title = '中国各线城市二手房出售挂牌价指数走势图 '
                    }
                    if(dataType == 'area'){
                        title = '中国各地区城市二手房出售挂牌指数走势图'
                    }

                }else{

                    if(dataType == 'all'){
                        title = '全国城市二手房出租挂牌量指数和挂牌价指数 '
                    }
                    if(dataType == 'square'){
                        title = '中国城市二手房不同套型面积出租挂牌价指数走势图  '
                    }
                    if(dataType == 'citylevel'){
                        title = '中国各线城市二手房出租挂牌价指数走势图 '
                    }
                    if(dataType == 'area'){
                        title = '中国各地区城市二手房出租挂牌指数走势图'
                    }
                }


                var option1 = {
                    title: {
                        text: title,
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: formatter
                    },
                    grid: {
                        bottom: 90
                    },
                    dataZoom: [{
                        type: 'inside'
                    }, {
                        type: 'slider'
                    }],
                    xAxis: [{
                        data: categoryData,
                        silent: false,
                        splitLine: {
                            show: false
                        },
                        splitArea: {
                            show: false
                        }
                    }],
                    yAxis: [{
                        name: '挂牌价指数(线)',
                        splitArea: {
                            show: false
                        },
                    },{
                        name: '挂牌量指数(柱)',
                        splitArea: {
                            show: false
                        },
                    },
                    ],
                    series: dataarr
                };

                myChart1.setOption(option1);
            }
        })
    }
$(function(){
    selectTabChange(strType,dataType);
})
</script>



<input type="hidden" id="zoneNumber" value="-1"/>
<input type="hidden" id="province" value="-1"/>
%{--<asset:javascript src="analyze/housingIndex.js" />--}%


</body>
</html>
